<template>
  <div>
    <div class="nav">
      <van-icon name="arrow-left" @click="()=>{this.$router.go(-1)}" />
      <span>修改密码</span>
      <van-button square type="primary" size="small" @click="onSubmit">完成</van-button>
    </div>

    <van-cell-group>
      <van-field v-model="message" label="当前账号" type="textarea" rows="1" autosize disabled />
    </van-cell-group>
    <van-divider />
    <van-cell-group>
      <van-field
        v-model="oldpassword"
        label="旧密码"
        placeholder="填写旧密码"
        rows="1"
        autosize
        :right-icon="types?'closed-eye':'eye-o'"
        @click-right-icon="chexs"
        :type="types?'password':'text'"
      />
    </van-cell-group>

    <van-cell-group>
      <van-field
        v-model="newpassword"
        label="新密码"
        placeholder="填写新密码"
        rows="1"
        autosize
        :error-message="errorMsg"
        :right-icon="type?'closed-eye':'eye-o'"
        @click-right-icon="chex"
        :type="type?'password':'text'"
      />
    </van-cell-group>

    <van-cell-group>
      <van-field
        v-model="newpasswords"
        label="确认密码"
        placeholder="再次填写确认"
        rows="1"
        autosize
        :error-message="errMsg"
        :right-icon="typ?'closed-eye':'eye-o'"
        @click-right-icon="che"
        :type="typ?'password':'text'"
      />
    </van-cell-group>

    <p>密码必须是6-16位的数字、字符组合</p>
  </div>
</template>
<script>
import { modifyPsw } from "@/API/user.js";
import { Notify } from "vant";
import { Dialog } from "vant";
import { Toast } from "vant";
import axios from "axios"
export default {
  created() {
    this.message = this.$store.state.userInfo.phone;
  },
  data() {
    return {
      types: false,
      type: true,
      typ: true,
      message: 1111,
      oldpassword: "",
      newpassword: "",
      messages: true,
      passwords: true,
      newpasswords: "",
      errorMsg: "",
      errMsg: ""
    };
  },
  methods: {
    chexs() {
      this.types = !this.types;
    },
    chex() {
      this.type = !this.type;
    },
    che() {
      this.typ = !this.typ;
    },
    onSubmit() {
      if (this.oldpassword && this.newpassword) {
        this.changePwd();
      } else {
        Dialog.alert({
          message: "还有选项没填"
        });
      }
    },
    changePwd() {
      if (this.newpassword.length >= 6 && this.newpassword.length <= 16) {
        this.errorMsg = "";
        if (this.newpassword == this.newpasswords) {
          this.errMsg = "";
          Toast.loading({
            duration: 0, // 持续展示 toast
            forbidClick: true, // 禁用背景点击
            loadingType: "spinner",
            message: "加载中"
          });
          this.editPwd();
        } else {
          this.errMsg = "密码不一致";
        }
      } else {
        this.errorMsg = "密码最少为6位";
      }
    },
    editPwd() {
      let obj = {
        oldpassword: this.oldpassword,
        newpassword: this.newpassword
      };
      let url="https://www.easy-mock.com/mock/5d59f139cab53001d86f92f6/studentH52/user/modifyPsw"
      axios.post(url,obj)
        .then(res => {
          if (res.data.code == 666) {
            Toast.clear();
            Notify({
              message: "修改成功",
              duration: 1000,
              background: "#1989fa"
            });
          } else {
            Toast.clear()
            Dialog.alert({
              message: "原密码不正确"
            });
          }
        })
        .catch(err => {
          Toast.clear();
          Toast.fail("网络错误");
        });
    }
  }
};
</script>
<style lang="less" scoped>
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 10px;
  margin-bottom: 10px;
  span {
    font-size: 14px;
  }
}
p {
  font-size: 12px;
  color: #ccc;
  margin: 15px;
}
</style>